$(function(){
	//标签分页
	$('.nomchecked').click(function(){
		// debugger;
		var Id = $(this).index()+100;
		$('.nomchecked').removeClass('checked');
		$(this).addClass('checked');
		$('#' + Id ).show().siblings().hide();
		// nowTime();//掉用时间
	});
	//图片和内容--接口
	$.ajax({
		// url:'http://192.168.3.224:8080/demo/list',
		url:'./xl.json',
		method:'GET',
		// 线上
		// success:function(result){
		// 	console.log(result);
		// 	console.log(result.lo.lo);
		// 	var Data = result.lo.lo;
		// 	for(var i=0;i<Data.length;i++){
		// 		var box_content = `
		// 		  <li class="video_box_li1">
		// 		  	<img src=`+Data[i].url+` alt="">
		// 		  	<a href="">`+Data[i].name+`</a>
		// 		  	<div class="video_box_li1_3">
		// 		  		<span>`+Data[i].zongjindu+`</span>
		// 		  		<a href="">`+Data[i].teather+`</a>
		// 		  	</div>
		// 		  	<div class="video_box_li1_4">
		// 		  		<span>`+Data[i].price+`</span>
		// 		  		<span>`+Data[i].num+`</span>
		// 		  	</div>
		// 		  </li>
		// 		`;
		// 		$('.video_box').append(box_content); 
		// 	}
			
		// },
		// 本地
		success:function(result){
			console.log(result);
			console.log(result.data[0].name);
			console.log(result.footerContnet);
			var Data = result.data;
			var footerContnet = result.footerContnet;
			// 内容
			for(var i=0;i<Data.length;i++){
				var box_content = `
				  <li class="video_box_li1">
				  	<img src=`+Data[i].img+` alt="">
				  	<a href="">`+Data[i].name+`</a>
				  	<div class="video_box_li1_3">
				  		<span>`+Data[i].jindu+`</span>
				  		<a href="">`+Data[i].teacher+`</a>
				  	</div>
				  	<div class="video_box_li1_4">
				  		<span>`+Data[i].price+`</span>
				  		<span>`+Data[i].num+`</span>
				  	</div>
				  </li>
				`;
				$('.video_box').append(box_content); 
			}
			// 底部li列表
			for(var i=0;i<footerContnet.length;i++){
				var li_content=`
				  <li><a src='#'>${footerContnet[i].name}</a></li>
				`; 
				$('.footer-up-content').append(li_content);
			}
			
		}
	});
	// 左侧列表--接口
	$.ajax({
		method:'GET',
		url:'./time.json',
		success:function(result){
			var { leftList } = result.data;
			console.log(leftList);
				var _leftList = 
				`
					<p class="_tips_title">`+leftList[j].title+`</p>
					<div class="_tips_time">
						<p>距离上课</p>
						 <span class="timeNum">00</span>
						 时
						<span class="timeNum">00</span>
						分
						<span class="timeNum">00</span>
						秒
					</div>
					<div class="_tips_btn">立即报名</div>
					<div class="_tips_bottom">
						<img class="_tips_bottom_img" src="`+leftList[j].leftImg+`" alt="">
						<p class="_tips_bottom_imgtxt">`+leftList[j].teacher+`</p>
						<a href="">
							<span class="_tips_bottom_to">`+leftList[j].class+`</span>
							<span class="_rightJiantou"><img src="./images/right_white.png" alt=""></span>
						</a>
					</div>
				`;
				$('._img_tips_top').html(_leftList);
			}
			
	});	
	//右侧列表--接口
	$.ajax({
			method:'GET',
			url:'./time.json',
			success:function(result){
				var { rightList } = result.data;
				console.log(rightList);
				for(var i=0;i<rightList.length;i++){
					var _text_li =
					 `
					<li class='Hover' id='`+rightList[i].id+`'>
						<a class="_text_ul_a" href="" title="`+rightList[i].title+`">
							<div class='onGif _gif'></div>
							<div class='_time'>`+ rightList[i].time+`</div>
							<div class='_title'>`+rightList[i].title+`</div>
					    </a>
					</li>
					`;
					 $('.zsxJava_videoList_text_ul').append(_text_li);
					// 根据id来获得内容
					// var id = '#'+i;
					// console.log(id);
					// $(id + ' .zsxJava_videoList_text_ul').append(_text_li);
					 _time = rightList[i].time;
					 arrTime.push(_time);
					 // console.log(arrTime)
				}
			}
		});
	//底部html
	var dateTime = new Date();//当前时间
	var H,M,S;//定义时分秒;
	var surplusTime;//时间差
	var id;//右侧li的id	
	var _time;//开播时间
	var arrTime=[];//将时间存在数组里
	var j = 0;//通过右侧列表来控制 左侧图片和文字
	$('.foot-js').html(`
		<div class="openAll">
			<div class="openAll-content">
				<span>查看全部课程 ></span>
			</div>
		</div>
		<footer>
			<div class="footer-up">
				<h3 class="footer-up-title">合作链接</h3>
				<ul class="footer-up-content">
				</ul>
			</div>
			<div class="footer-down">
				<img class="footer-down-one" src="./images/kt-icon.png" alt="">
				<p class="footer-down-two">Copyright © 2021 Tencent. All Rights Reserved.</p>
				<ul class="footer-down-ul">
					<li>深圳市腾讯计算机系统有限公司</li>
					<li> 版权所有 |&nbsp;</li>
					<li> <a href="">腾讯课堂服务协议</a>&nbsp;|&nbsp;</li>
					<li><a href="">隐私政策</a>&nbsp;|&nbsp;</li>
					<li><a href="">站点地图</a>&nbsp;|&nbsp;</li>
					<li><a href="">侵权投诉</a>&nbsp;|&nbsp;</li>
					<li><a href="">问题反馈</a>&nbsp;|&nbsp;</li>
					<li><a href="">帮助</a>&nbsp;|&nbsp;</li>
					<li><a href="">涨知识</a></li>
				</ul>
			</div>
		</footer>`);
		
	//* 开播倒计时 */
	/* 开播时间处理 */
	function nowTime(data,num){
			console.log('-----------');
			console.log(data,num);//当前时间和当前索引值,num为加载传的i和hover传的j
			console.log('-----------');
		// 本地时间
			dateTime = new Date();
		// debugger;
			var nowHours = dateTime.getHours();//时
			var nowMinutes = dateTime.getMinutes();//分
			var nowSeconds = dateTime.getSeconds();//秒
			console.log(nowHours,nowMinutes,nowSeconds);
			var n = dateTime.getFullYear();
			var y = dateTime.getMonth()+1;
			var r = dateTime.getDate();
			console.log(n,y,r);
			var nyr = n+'-'+y+'-'+r;
			console.log(nyr);
			//获取开播时间
			// var __time = nyr +' '+ arrTime[j]+':00';//截取 结束时间
			var __time = nyr +' '+data+':00';//截取 结束时间
			console.log(__time);
			var End = new Date(__time);//将结束时间转化为时间戳
			var endTime = End.getTime();//将页面上的时间转化为时间戳
			var newTime = dateTime.getTime(); //将当前的时间转化为时间戳
			surplusTime = endTime-newTime;//时间差
			console.log(endTime,newTime,surplusTime);
			
			if(surplusTime>=0){
				H = Math.floor(surplusTime/1000/60/60%24);
				M = Math.floor(surplusTime/1000/60%60);
				S = Math.floor(surplusTime/1000%60);
				console.log(H,M,S);
				H = H<10 ?'0'+H:H;//补零
				M = M<10 ?'0'+M:M;
				S = S<10 ?'0'+S:S;
				console.log(H+':'+M+':'+S);
			}else{
				//超过时间 显示已开播
				 id ='#'+(num+1);
				// console.log(id);
				// console.log($(id).find('.onGif'));
				console.log('开播了');
				$('._tips_time').html('<p><img src="./images/kaibo.gif"></img>正在上课</p>');
				$(id).find('.onGif').removeClass('_gif').addClass('kaibogif');
				$(id).find('._time').html('直播中').css('color','#6bc3f9');
				// $(id).find('._title').css('color','#6bc3f9');
				// $(id).css({'border-left':'4px solid #23b8ff','background-color':'#fff'});
			}
			//获取开播倒计时时间
			$('.timeNum').eq(0).html(H);
			$('.timeNum').eq(1).html(M);
			$('.timeNum').eq(2).html(S);
			// if(num>=9){
			// 	setTimeout(()=>{
			// 		arrTime.forEach(function(x,i,arrTime){
			// 			nowTime(x,i);
			// 		});
			// 	},1000);
			   
			// }else{
				// setTimeout(nowTime,1000)
			// }
			 //递归获取实时倒计时间：存在问题--时间数组只有10个数据，
			// 再调用10次之后，data为undefined，
	}
	//不延时获取,arrTimeh为初始值
	var time=setTimeout(function(){
			// arrTime.map(nowTime);
			arrTime.forEach(function(x,i,arrTime){
				nowTime(x,i);
			});
		},500
	);
	/* 开播hover事件 */
	$('body').on('mouseenter','.Hover',function(){
		j = $(this).index()+1;
		console.log(id);
		console.log(j);
		/*  rightList huover时 调用接口  */
		//左侧列表--接口
		$.ajax({
			method:'GET',
			url:'./time.json',
			success:function(result){
				j = j-1;
				var { leftList } = result.data;
				console.log(leftList);
				console.log(j);
				
				var _leftListOne =
				`
					<p class="_tips_title">`+leftList[j].title+`</p>
					<div class="_tips_time">
						<p>距离上课</p>
						<span class="timeNum">`+H+`</span>
						时
						<span class="timeNum">`+M+`</span>
						分
						<span class="timeNum">`+S+`</span>
						秒
					</div>
					<div class="_tips_btn">立即报名</div>
					<div class="_tips_bottom">
						<img class="_tips_bottom_img" src="`+leftList[j].leftImg+`" alt="">
						<p class="_tips_bottom_imgtxt">`+leftList[j].teacher+`</p>
						<a href="">
							<span class="_tips_bottom_to">`+leftList[j].class+`</span>
							<span class="_rightJiantou"><img src="./images/right_white.png" alt=""></span>
						</a>
					</div>
				`;
				var _leftListTwo = `
					<p class="_tips_title">`+leftList[j].title+`</p>
					<div class="_tips_time">
						<p class="sk"><img src="./images/kaibo.gif"></img>正在上课</p>
					</div>
					<div class="_tips_btn">立即报名</div>
					<div class="_tips_bottom">
						<img class="_tips_bottom_img" src="`+leftList[j].leftImg+`" alt="">
						<p class="_tips_bottom_imgtxt">`+leftList[j].teacher+`</p>
						<a href="">
							<span class="_tips_bottom_to">`+leftList[j].class+`</span>
							<span class="_rightJiantou"><img src="./images/right_white.png" alt=""></span>
						</a>
					</div>
				`;
				nowTime(arrTime[j],j);//根据hover来显示当前时间,并传递参数
				if(surplusTime>=0){
					$('._img_tips_top').html(_leftListOne);
				}else {
					$('._img_tips_top').html(_leftListTwo);//将倒计时改成正在上课
				}
			}
		});
		var zhiboHtml = $(this).find('._time').html();
		if(zhiboHtml.indexOf('直播中') != -1){//正在直播的
			$('#_imgWidth').attr('src','./images/'+j+'.jpg');
			$(this).find('.onGif').nextAll().css('color','#6bc3f9');
			$(this).css('border-left','4px solid #23b8ff');
			$(this).css('background-color','#fff');
		}else{//未直播的
			$(this).find('.onGif').css('background-color','#6bc3f9');
			$('#_imgWidth').attr('src','./images/'+j+'.jpg');
			$(this).css('background-color','#fff');
			$(this).find('.onGif').nextAll().css('color','#6bc3f9');
			$(this).css('border-left','4px solid #23b8ff');
		}
	   
		// if(surplusTime>=0){
		// 	$(this).find('.onGif').removeClass('kaibogif').addClass('_gif');//未开播 移除gif
		// }else {
		// 	$(this).find('.onGif').removeClass('_gif').addClass('kaibogif');//开播 加上gif
		// }
	});
	$('body').on('mouseleave','.Hover',function(){
		var zhiboHtml = $(this).find('._time').html();
		if( zhiboHtml.indexOf('直播中') != -1){//正在直播的
			$(this).css('border-left','4px solid #f4f4f4');
			$(this).css('background-color','#f4f4f4');
			$(this).find('._title').css('color','#333333');
		}else{//未直播的
			$(this).css('border-left','4px solid #f4f4f4');
			$(this).css('background-color','#F4F4F4');
			$(this).find('.onGif').css('background-color','#cccccc');
			$(this).find('._time').css('color','#bbbbbb');
			$(this).find('._title').css('color','#333333');
		 }
	});
});